<template>
  <div class="faq">
    <div class="banner_why">
      <h1>常见问题</h1>
    </div>
    <div class="faq_content">
      <div class="faq_contian" v-for="(a,index) in goods">
        <h2>{{a.title}}</h2>
          <el-row class="tac">
            <el-col :span="24">
              <el-menu
                default-active="0"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#fff"
                text-color="#333333"
                active-text-color="#fff"
                :unique-opened="true"
              >
                <div v-for="(b,aindex) in a.faq" class="faq_list">
                  <el-submenu :index="aindex.toString()">
                    <template slot="title"><span><nobr>{{b.f}}</nobr></span></template>
                    <div class="faq_text">{{b.q}}</div>
                  </el-submenu>
                </div>
              </el-menu>
            </el-col>
          </el-row>
      </div>
      <div style="height: 0.5rem"></div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  const ERR_OK = 200;
  export default {
    data(){
      return {
        goods: {}
      }
    },
    methods: {
      handleOpen(key, keyPath) {
//        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
//        console.log(key, keyPath);
      }
    },
    created() {
      this.$http.get('../../../static/data.json').then(response => {
        // success callback
        if (response.status === ERR_OK) {
          response = response.data;
          this.goods = response.seller;
        };
      }, response => {
        // error callback
        console.log(1)
      })
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .faq
    .banner_why
      width: 100%
      height: 200px
      background: url("../../../static/images/banner.jpg") no-repeat
      background-size: 100% 100%
      padding-top:116.5px
      padding-left:40px
      box-sizing: border-box
      h1
        font-size: 20px
        color: #fff
    .faq_content
      background: #f5f5f5
      .faq_contian
        h2
          padding:0 18px;
          box-sizing: border-box
          font-size: 18px
          font-weight: bold
          color: #ff9c00
          line-height: 57px
        .el-menu
          border-right:solid 0 #fff
          background: #f5f5f5 !important
        .faq_list:last-child
          margin-bottom: 0 !important
        .faq_list
          margin-bottom: 7px !important
          .el-submenu__title
            background: #fff !important
            border-bottom: 1px solid #ddd
            font-size: 16px
            overflow: hidden;
            padding:0 18px
            span
              display: inline-block;
              width: 90%;
              text-overflow: ellipsis;
              overflow: hidden;
            .el-icon-arrow-down:before
              font-size: 24px
              color: #c7c7c7
        div.faq_text
          padding: 16px 18px 18px
          box-sizing:border-box
          font-size: 14px
          color: #333
          background: #fff
        .el-submenu__title:hover
          background: #fff

</style>
